<template>
    <div class="admin-product-category">
        <div class="admin-product-header">产品列表</div>
        <div class="admin-product-content">
            <span><el-button type="primary" @click="() => router.push({ path: '/admin/add_product' })">新增</el-button></span>
            <div>
                <el-table v-loading="loading" :data="productCategoryData" style="width: 100%">
                    <el-table-column type="index"/>
                    <el-table-column prop="serial" label="产品编号" width="180" />
                    <el-table-column prop="title" label="中文标题" width="240" show-overflow-tooltip  />
                    <el-table-column prop="title_en" label="英文标题" width="240" show-overflow-tooltip />
                    <el-table-column prop="price" label="价格（元）" width="80" />
                    <el-table-column label="产品规格" width="180" >
                        <template v-slot:default="scope">
                            <span>{{ scope.row.specs }} / {{ scope.row.unit }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="图片">
                        <template v-slot:default="scope">
                            <span v-if="scope.row.cover" class="bty-product-image" @click="shorPreview(scope.row.cover)">查看图片</span>
                            <div v-if="previewImage" class="image-preview-overlay" @click="closePreview">
                                <img :src="previewImage" class="image-preview" />
                            </div>                                
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template #header>
                            <el-input v-model="search" size="small" placeholder="请输入编号或标题搜索" style="width: 20rem;" @change="getProductList"/>
                        </template>
                        <template v-slot:default="scope">
                            <el-button type="danger" :icon="Delete" circle @click="deleteOpenDialog(scope.row.id)" />
                            <el-button type="primary" :icon="Edit" circle @click="updateProductCategory(scope.row.id)" />
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px;">
                    <el-pagination 
                        background 
                        :page-size="currentSize"
                        layout="prev, pager, next" 
                        :total="productTotal" 
                        @current-change="changePage" 
                        v-model:current-page="currentPage" 
                    />
                </div>                
            </div>
        </div>

        <el-dialog v-model="deleteDialog" title="删除此产品" width="500" align-center>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="onSubmitDeleteCancle">取消</el-button>
                    <el-button type="danger" @click="onSubmitDelete">
                        删除
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, Edit } from '@element-plus/icons-vue';
import { listProduct, delProduct } from '../../requests/index';
import { useRouter } from 'vue-router';

const search = ref();
const router = useRouter();
const loading = ref(true);
const token = window.localStorage.getItem("token");
const headersAdmin = {
    Authorization: `Bearer ${token}`
};
const productCategoryData = ref([]);
const productTotal = ref(0);
const currentPage =  ref(1);
const currentSize = ref(10)
const deleteDialog = ref(false);
const deleteDialogID = ref();
// 获取产品列表 
const getProductList = async()=>{
    loading.value = true;
    const res = await listProduct({"page": currentPage.value, "size": currentSize.value, "search": search.value});
    if (res.status === 2000){
        productCategoryData.value = res.data;
        productTotal.value = res.total;
    }else{
        ElMessage.error("获取产品列表失败")
    };
    loading.value = false;
};
getProductList();
// 分页
const changePage = async()=>{
    loading.value = true;
    const res = await listProduct({"page": currentPage.value, "size": currentSize.value,"search": search.value});
    if (res.status === 2000){
        productCategoryData.value = res.data;
        productTotal.value = res.total;
    }else{
        ElMessage.error("获取产品列表失败")
    };
    loading.value = false;
}
// 删除产品
const deleteOpenDialog = (id) => {
    deleteDialog.value = true;
    deleteDialogID.value = id;
};
// 取消删除
const onSubmitDeleteCancle = () =>{
    deleteDialogID.value = null;
    deleteDialog.value = false;
}
// 确认删除
const onSubmitDelete = async()=>{
    const res = await delProduct({"id": deleteDialogID.value});
    if (res.status === 2000){
        ElMessage.success("删除成功");
    }else{
        ElMessage.error("删除失败")
    };
    deleteDialogID.value = null;
    deleteDialog.value = false;
    getProductList();
};

// 更新产品
const updateProductCategory = (id)=>{
    router.push({path: "/admin/update_product", query: {"id": id}});
}
// 图片预览
const previewImage = ref();
const shorPreview = (img)=>{
    previewImage.value = img;
};
const closePreview = ()=>{
    previewImage.value = null;
}

</script>

<style scoped>
.admin-product-header {
    margin-top: 20px;
    margin-left: 20px;
    height: 40px;
    line-height: 40px;
    background-color: #F9F9F9;
}

.admin-product-content {
    margin-top: 10px;
    margin-bottom: 50px;
    margin-left: 20px;
}

.admin-product-category {
    min-height: 100px;
}
.bty-product-image{
    cursor: pointer;
    z-index: inherit;
}
.bty-product-image:hover{
    color: rgb(52, 52, 240);
}
.image-preview-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.image-preview {
  max-width: 90%;
  max-height: 90%;
}
/* 使用 Element Plus 的 fade 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>